import classnames from 'classnames'
import { Image } from 'antd-mobile'
import Icon from '@/component/Icon'

import styles from './index.module.scss'
import { TAtilcle } from '@/api/article'
import { useNavigate } from 'react-router-dom'

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type?: 0 | 1 | 3
  article: TAtilcle
}

const ArticleItem = ({ type = 0, article }: Props) => {
  const navigate = useNavigate()
  return (
    <div className={styles.root}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}
        onClick={()=>navigate(`/article/${article.art_id}`)}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className='article-imgs'>
            {article.cover.images.map(v => {
              return (
                <div key={v} className='article-img-wrapper'>
                  <Image 
                    src={v}
                    alt=''
                    lazy
                    height={75}
                  />
                </div>
              )
            })}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        <span>{article.pubdate}</span>
        <span className='close'>
          <Icon type='iconbtn_essay_close' />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
